<template>
	<view class="h-[calc(100vh-45px)] py-1 px-3 flex flex-col">
		<!-- 拣货下架 -->
		<view class="h-[calc(100%-195px)] mt-3">
			<uni-table border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">快递单号</uni-th>
					<uni-th align="center">库位号</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-th align="center">
						<view>{{ item.courierNumber }}</view>
						<view>{{ item.cargoName }}({{ item.actualWeight }})kg</view>
					</uni-th>
					<uni-th align="center">{{ item.seat }}</uni-th>
				</uni-tr>
			</uni-table>
		</view>
		<view class="h-[160px]">
			<uv-form labelPosition="left" labelWidth="auto" :model="formModel">
				<uv-form-item label="单号" prop="delivery.orderId" borderBottom>
					<uv-input v-model="formModel.delivery.orderId" border="none" placeholder="请输入或扫描订单号" />
					<uv-button type="primary" shape="circle" @click="getData" size="mini">查询</uv-button>
					<uv-button type="primary" shape="circle" @click="submit" size="mini" class="ml-1">终止拣货</uv-button>
				</uv-form-item>
			</uv-form>
			<view class="h-[calc(100%-61px)] grid grid-cols-3 text-[#ccc] text-[14px]">
				<view class="flex items-center">
					<span class="w-[65px]">会员名称</span>
					<span class="w-[calc(100%-60px)] truncate">{{ showForm.userName || '空' }}</span>
				</view>
				<view class="flex items-center">
					<span class="w-[65px]">类型</span>
					<span class="w-[calc(100%-60px)] truncate">{{ showForm.cargoType || '空' }}</span>
				</view>
				<view class="flex items-center">
					<span class="w-[65px]">件数</span>
					<span class="w-[calc(100%-60px)] truncate">{{ showForm.packageCount || '空' }}</span>
				</view>
				<view class="flex items-center">
					<span class="w-[65px]">订单货物</span>
					<span class="w-[calc(100%-60px)] truncate">{{ showForm.cargoName || '空' }}</span>
				</view>
				<view class="flex items-center">
					<span class="w-[65px]">承运商</span>
					<span class="w-[calc(100%-60px)] truncate">{{ showForm.carrierCompany || '空' }}</span>
				</view>
				<view class="flex items-center">
					<span class="w-[65px]">备注</span>
					<span class="w-[calc(100%-60px)] truncate">{{ showForm.orderRemark || '空' }}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { getPickingDesign, setPickingDesign } from '@/api/modules/pickingDesign.js'
	
	const defaultShow = {
		userName: '',
		cargoType: '',
		packageCount: 0,
		cargoName: '',
		carrierCompany: '',
		orderRemark: ''
	}
	const formModel = ref({
		delivery: {
			orderId: ''
		}
	}) // 查询条件
	const showForm = ref({ ...defaultShow }) // 展示表单
	const selectionObj = ref([]) // 多选集合
	const tableData = ref([]) // 回显表格数据
	// 查询
	const getData = async () => {
		const res = await getPickingDesign(formModel.value.delivery)
		// console.log(res)
		tableData.value = res.code === 200 ? res.data.productList : [],
		showForm.value = Object.assign({}, { ...defaultShow}, res.code === 200 ? res.data.orderVo : {})
		console.log(res)
	}
	// 拣货下架 终止拣货 domesticTrickingNumber
	const submit = () => {
		const strArr = selectionObj.value.map(item => {
			return tableData.value[item].courierNumber
		})
		// 传递过去的参数
		const config = {
			domesticTrickingNo: strArr.join(',')
		}
		setPickingDesign(config).then((res) => {
			if(res.code === 200) {
				uni.navigateTo({ url: '/pages/index/index' })
			}
		}).catch(() => {
			uni.showToast({ title: '终止拣货失败!' })
		})
	}
	
	// 列表多选内容发生改变事件
	const selectionChange = (e) => {
		selectionObj.value = e.detail.index
		console.log(e.detail.index)
	}
</script>

<style>

</style>
